<!--咨询组件-->

<template>
  <div class="consultation">
    <!-- 专家选择 -->
    <div class="expert-select">
      <h3>选择健康专家</h3>
      <div class="expert-list">
        <div v-for="expert in experts"
             :key="expert.id"
             class="expert-card"
             @click="selectExpert(expert)">
          <img :src="expert.avatar" alt="头像">
          <h4>{{ expert.name }}</h4>
          <p>{{ expert.title }}</p>
          <p>专长：{{ expert.specialty }}</p>
        </div>
      </div>
    </div>

    <!-- 咨询记录 -->
    <div class="consultation-history">
      <h3>历史咨询记录</h3>
      <div v-for="item in history" :key="item.id" class="history-item">
        <p>{{ item.expertName }} · {{ item.date }}</p>
        <p>{{ item.summary }}</p>
      </div>
    </div>
  </div>
</template>

<script>
import { getExperts, getConsultationHistory } from '@/api/consultation'

export default {
  data() {
    return {
      experts: [],
      history: []
    }
  },
  async created() {
    this.experts = (await getExperts()).data
    this.history = (await getConsultationHistory(this.$store.state.userId)).data
  },
  methods: {
    selectExpert(expert) {
      this.$router.push({
        name: 'ConsultationDetail',
        params: { expertId: expert.id }
      })
    }
  }
}
</script>